iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 14
0
自我挑戰組

GAME30天系列 第 14

webSocket intro. (2/4

  • 分享至 

  • xImage
  •  

不斷互相的client端與server端

what is websocket?

websocket 為真正讓瀏覽器實現雙向溝通的一項協議, 讓 server 也可以主動 push 訊息到 client, 有以下優點

  1. 較小的頻寬資源消耗, 連線建立後, 伺服器和用戶端之間交換資料時, 不用每次傳輸都攜帶完整的表頭檔, 而 http 卻需要

  2. 更強的實時性, 延遲更少, 比起 polling, long-polling能在短時間推送更多次資料

  3. 可以傳輸二進位的數據

  4. client 可以和不同的 server進行通訊

  5. 更好的壓縮效果。相對於HTTP壓縮,Websocket在適當的擴充功能支援下,可以沿用之前內容的上下文,在傳遞類似的資料時,可以明顯提高壓縮率。

https://ithelp.ithome.com.tw/upload/images/20171224/20107379nuSdvtUXC8.png

Websocket使用ws或wss的統一資源標誌符,類似於HTTPS,其中wss表示在TLS之上的Websocket。

如:

ws://example.com/wsapi
wss://secure.example.com/

Websocket使用和 HTTP 相同的 TCP 埠,可以繞過大多數防火牆的限制。預設情況下,Websocket協定使用80埠;執行在TLS之上時,預設使用443埠。

瀏覽器的 websocket api

const ws = new WebSocket('ws://localhost:8080');

ws物件建立後, 就會開始執行握手

webSocket.readyState

類似於XMLHttpRequest.readyState, 共有四種狀態

  • 0 : connecting, 正在連接
  • 1 : open, 連接成功
  • 2 : closing, 正在關閉連線
  • 3 : closed, 連線關閉, 連線失敗

webSocket.onopen

用來監聽連接成功的狀態

ws.onopen = function () {
  ws.send('Hello Server!');
}

webSocket.onclose

用來監聽連線關閉的狀態

ws.onclose = function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
};

webSocket.onmessage

用來監聽接收伺服器傳過來的訊息

ws.onmessage = function(event) {
  var data = event.data;
};

webSocket.send()

send()方法用來向伺服器傳送訊息

ws.send('your message');

參考資料 阮一峰的网络日志


上一篇
webSocket intro. (1/4
下一篇
webSocket intro. (3/4
系列文
GAME30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
豬豬人
iT邦新手 4 級 ‧ 2019-08-27 22:32:42

請問我出現
test.php:2 WebSocket connection to 'ws://localhost:8080/' failed: Error during WebSocket handshake: Unexpected response code: 200
錯誤
我的localhost:8080跟樓主的樣

rutentest iT邦新手 5 級 ‧ 2019-08-29 23:40:07 檢舉

確認一下後端程式

ws://localhost:8080/

這個路由是否有確實握到手喔

我要留言

立即登入留言